<template>
	<div>
		<!-- 搜索 -->
		<el-row :gutter="20">
			<el-col :span="8">
				<el-input placeholder="请输入内容" class="input-with-select">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</el-col>
		</el-row>

		<el-table border width="100%" :data="orderList">
			<el-table-column type="index" label="#"></el-table-column>
			<el-table-column label="订单编号" prop="order_number"></el-table-column>
			<el-table-column label="订单价格" prop="order_price"></el-table-column>
			<el-table-column label="是否付款" prop="order_price">
				<template slot-scope="scope">
					<el-tag effect="dark" size="mini" v-if="scope.row.order_pay==1">已付款</el-tag>
					<el-tag effect="dark" type="danger" size="mini" v-else="scope.row.order_pay==0">未付款</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="是否发货" prop="is_send"></el-table-column>
			<el-table-column label="下单时间" prop="create_time">
				<template slot-scope="scope">
					<!-- 时间格式转换 -->
					<span>{{scope.row.create_time|dateFormat}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<div style="display: flex;">
						<el-tooltip class="item" effect="dark" content="修改订单地址" placement="top">
							<zh-button color="primary" icon="edit" size="mini" @click="editAdress(scope.row.id)">
							</zh-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="物流信息" placement="top">
							<zh-button color="green" icon="location" size="mini" @click="showlocations(scope.row.id)">
							</zh-button>
						</el-tooltip>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<zh-pagination background :pageSizes="[4,6,8,10]" :total="total" @changed="changePage" :showPages="7"
			:layouts="['next','prev','pages','goto','info']" :pageSize="orderListModel.pagesize">
		</zh-pagination>


		<zh-dialog title="修改地址" width="50%" top="10%" :visible.sync="orderDialogVisible">
			<el-form label-width="90px" :model="addresslist" :rules="addressRules" ref="addressRef">
				<el-form-item label="省市区/县" prop="address1" label-width="90px">
					<el-cascader :options="cityData" v-model="addresslist.address1"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" prop="address2">
					<el-input v-model="addresslist.address2"></el-input>
				</el-form-item>
			</el-form>


			<div slot="footer" style="display: flex;">
				<zh-button color="red" @click="orderDialogVisible=false">取消</zh-button>
				<zh-button color="primary">确 定</zh-button>
			</div>
		</zh-dialog>


		<!-- 物流进度 -->
		<zh-dialog title="物流进度" width="50%" top="10%" :visible.sync="logisticsDialogVisible">

			<el-timeline>
				<el-timeline-item v-for="(item, index) in logistics" :key="index" icon="el-icon-location">
					<p style="margin:0px;">{{ item.context }}</p>
					<p style="margin:0px;">{{ item.time }}</p>
				</el-timeline-item>
			</el-timeline>

			<div slot="footer" style="display: flex;">
				<zh-button color="red" @click="logisticsDialogVisible=false">取消</zh-button>
				<zh-button color="primary">确 定</zh-button>
			</div>
		</zh-dialog>
	</div>
</template>

<script>
	import cityData from "./citydata.js"
	export default {
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				orderListModel: {
					query: "",
					pagesize: 4,
					pagenum: 1,
				},
				// 订单列表
				orderList: [],
				total: 0,
				orderDialogVisible: false,
				logisticsDialogVisible: false,
				// 省市区/县
				cityData: [],
				addresslist: {
					address1: [],
					address2: "",
				},
				//  城市校验规则
				addressRules: {
					address1: [{
						required: true,
						message: "请输入城市名称",
						trigger: "blur"
					}],
					address2: [{
						required: true,
						message: "请输入详细地址",
						trigger: "blur"
					}],
				},
				// 物流进度
				logistics: [],
			}
		},
		mounted() {
			// this.scroll(this.$refs.container,this.$refs.content)
		},
		// 组件方法
		methods: {
			// 获取订单列表数据
			async getOrdersList() {
				try {
					const data = await this.$apis.getOrders(this.orderListModel);
					this.orderList = data.data1.goods;
					this.total = data.data1.total;
					console.log(data)
				} catch (e) {
					console.log(e)
				}
			},
			changePage(a, b) {
				console.log(a, b)
				this.orderListModel.pagenum = a;
				this.orderListModel.pagesize = b;
				this.getOrdersList();
			},
			editAdress() {
				let citydata = [];
				for (var i in cityData) {
					citydata.push(cityData[i]);
				}
				this.cityData = citydata;
				this.orderDialogVisible = true;
			},
			// 物流进度
			async showlocations(id) {
				this.logisticsDialogVisible = true;

				try {
					const data = await this.$apis.getLogistics(id);
					this.logistics=data.data1;
					console.log(data)
				} catch (e) {
					console.log(e)
				}
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getOrdersList()
		},
	}
</script>

<style scoped>

</style>
